<template>
  <div class="celestial-container">
    <!-- 添加一个用于展示背景图片的 image 标签 -->
    <image 
      class="background-image"
      mode="widthFix"
    ></image>

    <div v-for="(celestial, index) in celestials" :key="index" class="celestial-item">
      <!-- 使用 navigator 替代 a 标签 -->
      <navigator 
        :url="`/pages/celestialGuides/planet/${celestial.path}/${celestial.path}`"
        @click="selectImage(index)"
        hover-class="none"
      >
        <p class="top-text">{{ celestial.topText }}</p> <!-- 新增：图片上方的文字 -->
        <!-- 使用 image 标签代替 img 标签 -->
        <image 
          :src="celestial.imageSrc"
          :alt="celestial.name"
          :class="{ 'selected': selectedIndex === index }"
          style="width: 658rpx; height: 508rpx; display: inline-block; box-sizing: border-box;"
        />
        <p>{{ celestial.name }}</p>
      </navigator>
    </div>
    <view style="color:white; margin-top: 10px;font-size: 20px;">
      想知道更多关于其他天体的秘密吗?
    </view>
    <view style="color:white;font-size: 20px;">
      快来问问你星空小助手吧！
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: null,
      celestials: [
        { name: '黑洞', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/blackhole.png', path: 'blackhole', topText: '点击图片探索对应天体' },
        { name: '恒星', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/hengxing.png', path: 'hengxing', topText: '光与热的源泉' },
        { name: '行星', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/EARTH.png', path: 'earth', topText: '围绕恒星的天体' },
        { name: '卫星', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/MOON.png', path: 'moon', topText: '行星的伴侣' },
        { name: '中子星', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/zhongzixing.png', path: 'zhongzixing', topText: '致密的天体残骸' },
        { name: '星云', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/nebula.png', path: 'nebula', topText: '星际物质的摇篮' },
        { name: '星系', imageSrc: 'https://education-cos-1307366133.cos.ap-shanghai.myqcloud.com/广东省科学技术普及志愿者协会/广东省科学技术普及志愿者协会-学生-311/staitc/planet/galaxy.png', path: 'galaxy', topText: '无数恒星的集合' },
      ]
    };
  },
  methods: {
    selectImage(index) {
      this.selectedIndex = index;
    }
  }
};
</script>

<style scoped>
.celestial-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000000;
  padding: 20px;
  font-size: 25px;
  color: white;
  position: relative;
}

/* 背景图片样式 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保背景图层位于内容之下 */
  object-fit: cover;
}

.celestial-item {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}

.celestial-item image {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out;
}

.celestial-item p {
  position: absolute;
  color: white;
  font-family: 'Microsoft YaHei';
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.celestial-item .top-text {
  top: 15px;
  left: 15px;
  font-size: 18px;
}

.celestial-item p:not(.top-text) {
  bottom: 15px;
  left: 15px;
  font-size: 24px;
}

.selected {
  box-shadow: 0 0 20px 5px white;
}

@media (max-width: 768px) {
  .celestial-item p {
    font-size: 20px;
  }

  .celestial-item .top-text {
    font-size: 16px;
  }
}
</style>